<script setup>

import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteGuest, guestList, updateGuest,insertGuest} from "@/api/guest";
//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数
const guestListDate = ref([])
const name = ref('')
const identityNumber = ref('')
const dialogFormVisible = ref(false)
const titleName = ref('')
// 租客添加、编辑表单数据模型
const formData = ref({
    name :'',
    telephoneNumber:'',
    identityNumber:"",
    room:''
})
const form = ref(null)
const formLabelWidth = '140px'
// 获取租客列表
const getGuestList = ()=>{
    const params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        name : name.value,
        telephoneNumber:formData.value.telephoneNumber,
        identityNumber:identityNumber.value,
        room: formData.value.room
    }
    guestList(params).then(res=>{
        if (res.status) {
            guestListDate.value = res.data.records
            total.value = res.data.total
        }
    })
}
getGuestList()
// 重置
const resetParams = ()=>{
    name.value = ''
    identityNumber.value = ''
    getGuestList()
}

// 当每页条数发生了变化，会调用
const handleSizeChange = (val) => {
    pageSize.value = val
    getGuestList()
}
// 当当前页面发生变化，会调用
const handleCurrentChange = (val) => {
    pageNum.value = val
    getGuestList()
}

// 删除租客
const deleteById = (id)=>{
    ElMessageBox.confirm(
        '确认删除吗，删除后不可恢复?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteGuest(id).then(res=>{
                if (res.status) {
                    ElMessage.success('删除成功')
                    getGuestList()
                }
            })
        })
        .catch(() => {})
}

// 租客添加打开dialog
const showAddDialog = (title)=>{
    resetForm()
    titleName.value = title
    dialogFormVisible.value = true
}
// 租客添加
const addGuest = () => {
    form.value.validate((valid)=>{
        if (valid) {
            insertGuest(formData.value).then(res=>{
                if (res.status) {
                    getGuestList()
                    ElMessage.success("添加成功")
                    dialogFormVisible.value = false
                }
            })
        }
    })
};
// 清空表单
const resetForm=()=>{
    formData.value = {
        name :'',
        telephoneNumber:'',
        identityNumber:"",
        room:''

    }
}
// 打开编辑dialog
const showEditDialog = (row,tile)=>{
    titleName.value = tile
    formData.value = {
        ...row
    }
    dialogFormVisible.value = true
}
// 更新租客
const editGuest= ()=>{
    updateGuest(formData.value).then(res =>{
        if (res.status) {
            getGuestList()
            ElMessage.success("更新成功")
            dialogFormVisible.value = false
        }
    })
}
// 表单校验
const rules = {
    username: [
        {required: true, message: '请输入姓名', trigger: 'blur'},
        {min: 2, max: 16, message: '长度为2-16位', trigger: 'blur'},
    ],
    Id: [
        {required: true, message: '请输入身份证号码', trigger: 'blur'},
        {min: 18, max: 18, message: '身份证号码不正确', trigger: 'blur'},
    ],
   telephoneNumber: [
        {required: true, message: '请输入电话号码', trigger: 'blur'},
        {min: 11, max: 11, message: '电话格式不正确', trigger: 'blur'},
    ],
    identityNumber: [
        {required: true, message: '请输入身份证号码', trigger: 'blur'},
        {min: 18, max: 18, message: '身份证格式不正确', trigger: 'blur'},
    ],
    room: [
        {required: true, message: '请输入房间号', trigger: 'blur'},
        {min: 3, max:4, message: '房间不存在', trigger: 'blur'},
    ]
}
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>租客管理</span>
                <div class="extra">
                    <el-button type="primary" @click="showAddDialog('添加租客')">添加租客</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="姓名：">
                <el-input v-model="name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证号：">
                <el-input v-model="identityNumber" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getGuestList">搜索</el-button>
                <el-button @click="resetParams">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="guestListDate" style="width: 100%">
            <el-table-column label="序号"  prop="id"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="身份证号码" prop="identityNumber"></el-table-column>
            <el-table-column label="电话号码" prop="telephoneNumber"></el-table-column>
            <el-table-column label="房间号" prop="room"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showEditDialog(row,'编辑租客')"></el-button>
                    <el-button  :icon="Delete" circle plain type="danger" @click="deleteById(row.id)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据"/>
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                       layout="jumper, total, sizes, prev, pager, next" background :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
    </el-card>
    <el-dialog v-model="dialogFormVisible" :title="titleName" width="500">
        <el-form ref="form" :model="formData"  label-position="top" :rules="rules">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                <el-input v-model="formData.name" autocomplete="off" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="身份证号码" :label-width="formLabelWidth" prop="identityNumber">
                <el-input v-model="formData.identityNumber" autocomplete="off" placeholder="请输入身份证号码" />
            </el-form-item>
            <el-form-item label="电话号码" :label-width="formLabelWidth" prop="telephoneNumber">
                <el-input v-model="formData.telephoneNumber" autocomplete="off" placeholder="请输入电话号码" />
            </el-form-item>
            <el-form-item label="房间号" :label-width="formLabelWidth" prop="room">
                <el-input v-model="formData.room" autocomplete="off" placeholder="请输入房间号" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="titleName ==='添加租客'?addGuest():editGuest()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>


</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>